<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>常规设置</title>
    {% include 'system/common/header.html' %}
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f1f1f1;
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 20px 10px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: #fff;
            border-bottom: 1px solid #ddd;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }
        
        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .header-text {
            color: #666;
            font-size: 14px;
        }
        
        .help-button {
            background: #0073aa;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .help-button:hover {
            background: #005a87;
        }
        
        .content {
            padding: 30px;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group:last-child {
            margin-bottom: 0;
        }
        
        .form-row {
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }
        
        .form-label {
            flex: 0 0 200px;
            font-weight: 600;
            color: #333;
            font-size: 14px;
            padding-top: 8px;
        }
        
        .form-control {
            flex: 1;
        }
        
        .form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #0073aa;
            box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
        }
        
        .form-select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            background: white;
            cursor: pointer;
        }
        
        .form-select:focus {
            outline: none;
            border-color: #0073aa;
            box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
        }
        
        .form-button {
            background: #0073aa;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .form-button:hover {
            background: #005a87;
        }
        
        .form-checkbox {
            margin-right: 8px;
        }
        
        .form-help {
            margin-top: 5px;
            color: #666;
            font-size: 13px;
            line-height: 1.4;
        }
        
        .form-help a {
            color: #0073aa;
            text-decoration: none;
        }
        
        .form-help a:hover {
            text-decoration: underline;
        }
        
        .language-switcher {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .language-btn {
            display: inline-block;
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-decoration: none;
            color: #333;
            background: #fff;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .language-btn:hover {
            background: #f5f5f5;
            border-color: #0073aa;
            color: #0073aa;
        }
        
        .language-btn.active {
            background: #0073aa;
            border-color: #0073aa;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        
        <div class="content">
            <form id="customForm">
                <!-- 站点标题 -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('Site Title') }}</label>
                        <div class="form-control">
                            <input type="text" class="form-input" name="site_title" value="Wordpress测">
                        </div>
                    </div>
                </div>
                
                <!-- 副标题 -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('Site Tagline') }}</label>
                        <div class="form-control">
                            <input type="text" class="form-input" name="site_tagline" value="555555555555">
                            <div class="form-help">
                                {{ _('Use a few words to explain what this site is about. Example: "Another WordPress site".') }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 站点图标 -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('Site Icon') }}</label>
                        <div class="form-control">
                            <button type="button" class="form-button">{{ _('Select a site icon') }}</button>
                            <!-- 隐藏的站点图标值字段 -->
                            <input type="hidden" name="site_icon" value="">
                            <div class="form-help">
                                {{ _('The site icon is the icon you see in browser tabs, bookmarks, and WordPress mobile apps. It should be square and at least 512 x 512 pixels.') }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- WordPress 地址 (URL) -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('WordPress Address (URL)') }}</label>
                        <div class="form-control">
                            <input type="url" class="form-input" name="wordpress_url" value="http://wpress.haoyueres.com">
                        </div>
                    </div>
                </div>
                
                <!-- 站点地址 (URL) -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('Site Address (URL)') }}</label>
                        <div class="form-control">
                            <input type="url" class="form-input" name="site_url" value="http://wpress.haoyueres.com">
                            <div class="form-help">
                                {{ _('If you want your site home page to be different from your WordPress installation directory, enter that address here.') }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 管理员邮箱地址 -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('Administrator Email Address') }}</label>
                        <div class="form-control">
                            <input type="email" class="form-input" name="admin_email" value="327878610@qq.com">
                            <div class="form-help">
                                {{ _('This address is used for admin purposes. If you change this setting, a confirmation email will be sent to your new address. The new address will not take effect until confirmed.') }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 成员资格 -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('Membership') }}</label>
                        <div class="form-control">
                            <label style="display: flex; align-items: center; margin: 0;">
                                <input type="checkbox" class="form-checkbox" name="users_can_register">
                                <span>{{ _('Anyone can register') }}</span>
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- 新用户默认角色 -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('New User Default Role') }}</label>
                        <div class="form-control">
                            <select class="form-select" name="default_role">
                                <option value="subscriber" selected>{{ _('Subscriber') }}</option>
                                <option value="contributor">{{ _('Contributor') }}</option>
                                <option value="author">{{ _('Author') }}</option>
                                <option value="editor">{{ _('Editor') }}</option>
                                <option value="administrator">{{ _('Administrator') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- 站点语言 -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('Site Language') }}</label>
                        <div class="form-control">
                            <div class="language-switcher">
                                <a href="{{ url_for('i18n.switch_language', lang='zh') }}"
                                   class="language-btn {% if session.get('lang', 'zh') == 'zh' %}active{% endif %}">
                                    简体中文
                                </a>
                                <a href="{{ url_for('i18n.switch_language', lang='en') }}"
                                   class="language-btn {% if session.get('lang') == 'en' %}active{% endif %}">
                                    English
                                </a>
                                <a href="{{ url_for('i18n.switch_language', lang='ja') }}"
                                   class="language-btn {% if session.get('lang') == 'ja' %}active{% endif %}">
                                    日本語
                                </a>
                                <a href="{{ url_for('i18n.switch_language', lang='ko') }}"
                                   class="language-btn {% if session.get('lang') == 'ko' %}active{% endif %}">
                                    한국어
                                </a>
                            </div>
                            <!-- 隐藏的语言值字段 -->
                            <input type="hidden" name="site_language" value="{{ session.get('lang', 'zh') }}">
                            <div class="form-help">
                                {{ _('Select site display language, the page will be updated immediately after switching.') }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 时区 -->
                <div class="form-group">
                    <div class="form-row">
                        <label class="form-label">{{ _('Timezone') }}</label>
                        <div class="form-control">
                            <select class="form-select" name="timezone">
                                <option value="Asia/Shanghai" selected>{{ _('Shanghai') }}</option>
                                <option value="Asia/Beijing">{{ _('Beijing') }}</option>
                                <option value="Asia/Hong_Kong">{{ _('Hong Kong') }}</option>
                                <option value="Asia/Tokyo">{{ _('Tokyo') }}</option>
                                <option value="America/New_York">{{ _('New York') }}</option>
                                <option value="Europe/London">{{ _('London') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- 保存按钮 -->
                <div class="form-group">
                    <div class="form-row">
                        <div class="form-label"></div>
                        <div class="form-control">
                            <button type="button" class="form-button" id="saveBtn" style="background: #28a745;">
                                {{ _('Save Settings') }}
                            </button>
                            <button type="button" class="form-button" id="loadBtn" style="background: #17a2b8; margin-left: 10px;">
                                {{ _('Load Settings') }}
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('customForm');
            const saveBtn = document.getElementById('saveBtn');
            const loadBtn = document.getElementById('loadBtn');

            // 保存设置
            saveBtn.addEventListener('click', function() {
                const data = {};
                
                // 收集表单数据 - 使用FormData来正确处理所有表单字段
                const formData = new FormData(form);
                for (let [name, value] of formData.entries()) {
                    // 处理checkbox的特殊情况
                    if (name === 'users_can_register') {
                        data[name] = value === 'on' ? '1' : '0';
                    } else {
                        data[name] = value;
                    }
                }
                
                console.log('保存数据:', data);
                
                // 发送保存请求
                fetch('/admin/sys/options/custom/save', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        layer.msg('{{ _("Settings saved successfully!") }}', {icon: 1, time: 1000});
                    } else {
                        layer.msg('{{ _("Save failed") }}：' + result.message, {icon: 2, time: 2000});
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    layer.msg('{{ _("Save failed") }}，{{ _("Please check your network connection") }}', {icon: 2, time: 2000});
                });
            });
            
            // 加载设置
            loadBtn.addEventListener('click', function() {
                fetch('/admin/sys/options/custom/load')
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        const settings = result.data;
                        console.log('加载数据:', settings);
                        
                        // 填充表单字段
                        Object.keys(settings).forEach(name => {
                            const input = form.querySelector(`[name="${name}"]`);
                            if (input) {
                                const value = settings[name];
                                if (value !== undefined) {
                                    if (input.type === 'checkbox') {
                                        input.checked = value === '1';
                                    } else {
                                        input.value = value;
                                    }
                                }
                            }
                        });
                        
                        layer.msg('{{ _("Settings loaded successfully!") }}', {icon: 1, time: 1000});
                    } else {
                        layer.msg('{{ _("Load failed") }}：' + result.message, {icon: 2, time: 2000});
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    layer.msg('{{ _("Load failed") }}，{{ _("Please check your network connection") }}', {icon: 2, time: 2000});
                });
            });
            
            // 页面加载时自动加载设置
            loadBtn.click();
        });
    </script>
</body>
{% include 'system/common/footer.html' %}
</html>